<template>
  <div class="record-container" style="padding: 0">
    <!-- 顶部选项卡 -->
    <div class="tab-box">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="item"
        @click="selectedTab = item.value"
      >
        <span :class="{ text: true, 'text-active': item.value === selectedTab }">
          {{ item.label }}
        </span>
        <span v-if="item.value === selectedTab" class="line"></span>
      </div>
    </div>
    <div v-if="selectedTab === 1" class="dialog-content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="60" align="center" />
        <el-table-column prop="name" label="铭牌名称" width="160" />
        <el-table-column prop="time" label="修改时间" width="210" />
        <el-table-column prop="status" label="审核状态" width="110">
          <template #default="{ row }">
            <span>
              {{ row.status === "agree" ? "同意" : "拒绝" }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="selectedTab === 2" class="dialog-content">
      <el-table :data="tableData" style="width: 100%" header-row-class-name="custom-header">
        <el-table-column prop="id" label="序号" width="60" align="center" />
        <el-table-column prop="penaltyAmount" label="保证金金额" width="100" align="center">
          <template #default="{ row }">
            <span v-if="row.penaltyAmount">￥</span>
            {{ row.penaltyAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="creatorState" label="动作" width="80" align="center">
          <template #default="{ row }">
            <span>{{ ["扣除", "退回", "冻结", "缴纳"][Number(row.creatorState)] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="时间" width="120" align="center" />
        <el-table-column prop="penaltyAmount" label="金额" width="80" align="center">
          <template #default="{ row }">
            <span v-if="row.penaltyAmount">￥</span>
            {{ row.penaltyAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="noticeContent" label="备注" width="120" align="center" />
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "RecordsInfo",
};
</script>
<script setup lang="ts">
import { ref } from "vue";

const selectedTab = ref(1);
const list = ref([
  {
    label: "铭牌记录",
    value: 1,
  },
  {
    label: "保证金记录",
    value: 2,
  },
]);
interface TableData {
  id: number;
  name: string;
  time: string;
  status: "agree" | "reject";
}

const tableData = ref<TableData[]>([
  { id: 1, name: "500", time: "2024-7-19 15:35:25", status: "agree" },
  { id: 2, name: "500", time: "2024-7-19 15:35:25", status: "reject" },
  { id: 3, name: "500", time: "2024-7-19 15:35:25", status: "agree" },
]);
</script>

<style lang="scss" scoped>
.record-container {
  padding: 20px;
  margin-left: 30px;
  background: #ffffff;
  box-shadow: 0px 4px 8px 0px #eaf0ff;
  border-radius: 9px 9px 9px 9px;
  height: 320px;
  :deep(.custom-tabs) {
    .el-tabs__nav-wrap::after {
      display: none;
    }
  }
  .tab-box {
    padding: 32px;
    display: flex;
    gap: 15px;
    cursor: default;
    position: relative;
    padding: 32px 32px 11px;
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: #e4e7ed;
    }
    .item {
      display: flex;
      align-items: center;
      flex-direction: column;

      .text {
        font-weight: 500;
        font-size: 16px;
        color: #4e5969;
      }
      .text-active {
        color: #3c80ff;
      }
      .line {
        margin-top: 4px;
        width: 25px;
        height: 2px;
        background: #3c80ff;
      }
    }
  }
  :deep(.el-table) {
    /* 表头背景色 */
    .el-table__header {
      th {
        background-color: #f2f3f5 !important;
        color: #1d2129;
        font-weight: 400 !important;
        font-size: 14px;
      }
    }
  }
  .dialog-content {
    padding: 15px 32px;
  }
}
</style>
